<template>
	<el-carousel :interval="4000" autoplay loop type="card">
		<el-carousel-item v-for="item in banner" :key="item._id">
			<router-link
				:to="{ name: 'detail', query: { menuId: item.menuId } }"
			>
				<img :src="item.product_pic_url" width="100%" alt="" />
			</router-link>
		</el-carousel-item>
	</el-carousel>
</template>

<script>
export default {
	props: ['banner'],
	name: 'CarouselComp',
};
</script>

<style>
.el-carousel {
	margin: 20px 0;
}
.el-carousel__item h3 {
	color: #475669;
	font-size: 14px;
	opacity: 0.75;
	line-height: 200px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}
</style>